<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover"><title>hexo-butterfly主题配置摘录_2 | LenlBlog</title><meta name="author" content="Lenl,lenl412@163.com"><meta name="copyright" content="Lenl"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="ffffff"><meta name="description" content="记录一下主题与博文相关的注意事项">
<meta property="og:type" content="article">
<meta property="og:title" content="hexo-butterfly主题配置摘录_2">
<meta property="og:url" content="https://lienle.gitee.io/%E4%B8%BB%E9%A2%98%E5%8F%8A%E5%8D%9A%E6%96%87%E7%9B%B8%E5%85%B3-2/index.html">
<meta property="og:site_name" content="LenlBlog">
<meta property="og:description" content="记录一下主题与博文相关的注意事项">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://z4a.net/images/2023/04/22/ce1b96feb4e86b8071ed46f0b017a0af.md.jpg">
<meta property="article:published_time" content="2023-04-22T03:53:44.000Z">
<meta property="article:modified_time" content="2023-04-22T08:45:29.919Z">
<meta property="article:author" content="Lenl">
<meta property="article:tag" content="butterfly主题">
<meta property="article:tag" content="Hexo">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://z4a.net/images/2023/04/22/ce1b96feb4e86b8071ed46f0b017a0af.md.jpg"><link rel="shortcut icon" href="/img/lenl.png"><link rel="canonical" href="https://lienle.gitee.io/%E4%B8%BB%E9%A2%98%E5%8F%8A%E5%8D%9A%E6%96%87%E7%9B%B8%E5%85%B3-2/index.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//hm.baidu.com"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><meta name="baidu-site-verification" content="codeva-6HME93uF43"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.min.css" media="print" onload="this.media='all'"><script>var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?629608ec0c773bd9f96cb72389693ab9";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"/search.xml","preload":false,"top_n_per_article":1,"unescape":false,"languages":{"hits_empty":"找不到您查询的内容：${query}","hits_stats":"共找到 ${hits} 篇文章"}},
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  dateSuffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: {"limitCount":50,"languages":{"author":"作者: Lenl","link":"链接: ","source":"来源: LenlBlog","info":"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}},
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
    }
  },
  isPhotoFigcaption: true,
  islazyload: true,
  isAnchor: false,
  percent: {
    toc: true,
    rightside: false,
  }
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'hexo-butterfly主题配置摘录_2',
  isPost: true,
  isHome: false,
  isHighlightShrink: true,
  isToc: true,
  postUpdate: '2023-04-22 16:45:29'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
    win.getCSS = (url,id = false) => new Promise((resolve, reject) => {
      const link = document.createElement('link')
      link.rel = 'stylesheet'
      link.href = url
      if (id) link.id = id
      link.onerror = reject
      link.onload = link.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        link.onload = link.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(link)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', 'ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script></head><body><!--include ./fullpage-loading.pug--><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="wizard-scene"><div class="wizard-objects"><div class="wizard-square"></div><div class="wizard-circle"></div><div class="wizard-triangle"></div></div><div class="wizard"><div class="wizard-body"></div><div class="wizard-right-arm"><div class="wizard-right-hand"></div></div><div class="wizard-left-arm"><div class="wizard-left-hand"></div></div><div class="wizard-head"><div class="wizard-beard"></div><div class="wizard-face"><div class="wizard-adds"></div></div><div class="wizard-hat"><div class="wizard-hat-of-the-hat"></div><div class="wizard-four-point-star --first"></div><div class="wizard-four-point-star --second"></div><div class="wizard-four-point-star --third"></div></div></div></div></div></div><script>const preloader = {
  endLoading: () => {
    document.body.style.overflow = '';
    document.getElementById('loading-box').classList.add("loaded")
  },
  initLoading: () => {
    document.body.style.overflow = 'hidden';
    document.getElementById('loading-box').classList.remove("loaded")
  }
}

preloader.initLoading()
window.addEventListener('load',()=> { preloader.endLoading() })
//避免加载时间过长
setTimeout(function(){preloader.endLoading();}, 3000);

if (false) {
  document.addEventListener('pjax:send', () => { preloader.initLoading() })
  document.addEventListener('pjax:complete', () => { preloader.endLoading() })
}</script><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "/img/hexo_loading.gif" data-lazy-src="/img/lenl.png" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">17</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">25</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">8</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 主页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 存档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 分享</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/collect/"><i class="fa-fw fas fa-book"></i><span> 大佬们の干货</span></a></li><li><a class="site-page child" href="/resources/"><i class="fa-fw fab fa-dropbox"></i><span> 屯屯鼠の资源</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg fixed" id="page-header" style="background-image: url('http://rtd8rl7h6.hd-bkt.clouddn.com/683e6a9b-e7ae-4f3b-88b8-7e31711db421.jpg')"><nav id="nav"><span id="blog-info"><a href="/" title="LenlBlog"><img class="site-icon" src= "/img/hexo_loading.gif" data-lazy-src="/img/lenl.png"/><span class="site-name">LenlBlog</span></a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search" href="javascript:void(0);"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 主页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 存档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 分享</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/collect/"><i class="fa-fw fas fa-book"></i><span> 大佬们の干货</span></a></li><li><a class="site-page child" href="/resources/"><i class="fa-fw fab fa-dropbox"></i><span> 屯屯鼠の资源</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">hexo-butterfly主题配置摘录_2</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2023-04-22T03:53:44.000Z" title="发表于 2023-04-22 11:53:44">2023-04-22</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2023-04-22T08:45:29.919Z" title="更新于 2023-04-22 16:45:29">2023-04-22</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E6%95%99%E7%A8%8B/">教程</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">6.1k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>26分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="hexo-butterfly主题配置摘录_2"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span><span class="post-meta-separator">|</span><span class="post-meta-commentcount"><i class="far fa-comments fa-fw post-meta-icon"></i><span class="post-meta-label">评论数:</span><a href="/%E4%B8%BB%E9%A2%98%E5%8F%8A%E5%8D%9A%E6%96%87%E7%9B%B8%E5%85%B3-2/#post-comment" itemprop="discussionUrl"><span class="valine-comment-count" data-xid="/%E4%B8%BB%E9%A2%98%E5%8F%8A%E5%8D%9A%E6%96%87%E7%9B%B8%E5%85%B3-2/" itemprop="commentCount"><i class="fa-solid fa-spinner fa-spin"></i></span></a></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><div class="note warning simple"><p>本教程摘录自<a target="_blank" rel="noopener" href="https://butterfly.js.org/posts/dc584b87/">butterfly主题官网文档</a>，为留作备份使用。</p>
</div>
<h2 id="1-语言">1 语言</h2>
<p>修改站点配置文件 <code>_config.yml</code></p>
<p>默认语言为 en</p>
<p>支持语言：</p>
<ul class="lvl-0">
<li class="lvl-2">
<p>default(en)</p>
</li>
<li class="lvl-2">
<p>zh-CN(简体中文)</p>
</li>
<li class="lvl-2">
<p>zh-TW(繁体中文)</p>
</li>
</ul>
<h2 id="2-网站资料">2 网站资料</h2>
<blockquote>
<p>修改网站各种资料，例如标题、副标题和邮箱等个人资料，请修改博客根目录的<code>_config.yml</code></p>
</blockquote>
<h2 id="3-导航栏设置">3 导航栏设置</h2>
<h3 id="3-1-参数设置">3.1 参数设置</h3>
<p>在 <code>主题配置</code> 文件中：</p>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">nav:</span></span><br><span class="line">  <span class="attr">logo:</span> <span class="comment">#image</span></span><br><span class="line">  <span class="attr">display_title:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">fixed:</span> <span class="literal">false</span> <span class="comment"># fixed navigation bar</span></span><br></pre></td></tr></table></figure>
<h3 id="3-2-菜单-目录">3.2 菜单/目录</h3>
<ol>
<li class="lvl-3">
<p>菜单配置：</p>
</li>
</ol>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">Home:</span> <span class="string">/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-home</span></span><br><span class="line"><span class="attr">Archives:</span> <span class="string">/archives/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-archive</span></span><br><span class="line"><span class="attr">Tags:</span> <span class="string">/tags/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-tags</span></span><br><span class="line"><span class="attr">Categories:</span> <span class="string">/categories/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-folder-open</span></span><br><span class="line"><span class="string">List||fas</span> <span class="attr">fa-list:</span></span><br><span class="line">  <span class="attr">Music:</span> <span class="string">/music/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-music</span></span><br><span class="line">  <span class="attr">Movie:</span> <span class="string">/movies/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-video</span></span><br><span class="line"><span class="attr">Link:</span> <span class="string">/link/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-link</span></span><br><span class="line"><span class="attr">About:</span> <span class="string">/about/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-heart</span></span><br></pre></td></tr></table></figure>
<ol start="2">
<li class="lvl-3">
<p>必须为<code>/xxx/</code> ，后面用 <code>||</code> 分开，跟图标名称，图标可不写。</p>
</li>
<li class="lvl-3">
<p>如果默认隐藏子目录，可在子目录添加 <code>hide</code></p>
</li>
</ol>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="string">List||fas</span> <span class="string">fa-list||hide:</span></span><br><span class="line">  <span class="attr">Music:</span> <span class="string">/music/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-music</span></span><br><span class="line">  <span class="attr">Movie:</span> <span class="string">/movies/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-video</span></span><br></pre></td></tr></table></figure>
<ol start="4">
<li class="lvl-3">
<p>导航文字可自行更改。</p>
</li>
</ol>
<h2 id="4-代码块">4 代码块</h2>
<div class="note info simple"><p>代码块中的所有功能只适用于 <code>Hexo</code> 自带的代码渲染，第三方渲染器不一定生效。</p>
</div>
<h3 id="4-1-代码高亮主题">4.1 代码高亮主题</h3>
<p>修改 <code>主题配置文件</code> ：</p>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">highlight_theme:</span> <span class="string">light</span></span><br></pre></td></tr></table></figure>
<p>支持6中预设：</p>
<ol>
<li class="lvl-3">
<p>darker</p>
</li>
<li class="lvl-3">
<p>pale night</p>
</li>
<li class="lvl-3">
<p>light</p>
</li>
<li class="lvl-3">
<p>ocean</p>
</li>
<li class="lvl-3">
<p>mac</p>
</li>
<li class="lvl-3">
<p>mac light</p>
</li>
</ol>
<h3 id="4-2-代码复制">4.2 代码复制</h3>
<p>修改 <code>主题配置文件</code> ：</p>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">highlight_copy:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<h3 id="4-3-代码狂展开-关闭">4.3 代码狂展开/关闭</h3>
<p>默认关闭，通过修改 <code>主题配置文件</code> 修改：</p>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">highlight_shrink:</span> <span class="literal">true</span> <span class="comment">#代码框不展开，需点击 &#x27;&gt;&#x27; 打开</span></span><br></pre></td></tr></table></figure>
<p>也可在每个post页的页头中单独设置此项，灵活控制。</p>
<h3 id="4-4-代码换行">4.4 代码换行</h3>
<p>在默认情况下，<code>Hexo</code> 在编译的时候不会实现代码自动换行。如果不希望在代码块的区域里有横向滚动条的话，可修改<code>主题配置文件</code> :</p>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">code_word_wrap:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<h3 id="4-5-代码高度限制">4.5 代码高度限制</h3>
<blockquote>
<p>3.7.0以上支持</p>
</blockquote>
<p>可配置代码高度限制，超出的部分会隐藏，并显示展开按钮:</p>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">highlight_height_limit:</span> <span class="literal">false</span> <span class="comment"># unit: px</span></span><br></pre></td></tr></table></figure>
<h2 id="5-社交图标">5 社交图标</h2>
<p>Butterfly支持 <a target="_blank" rel="noopener" href="https://fontawesome.com/icons?from=io">font-awesome v6</a> 图标.</p>
<p>书写格式：<code>图标名：url || 描述文字 || color</code></p>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">social:</span></span><br><span class="line">  <span class="attr">fab fa-github:</span> <span class="string">https://github.com/xxxxx</span> <span class="string">||</span> <span class="string">Github</span> <span class="string">||</span> <span class="string">&quot;#hdhfbb&quot;</span></span><br><span class="line">  <span class="attr">fas fa-envelope:</span> <span class="string">mailto:xxxxxx@gmail.com</span> <span class="string">||</span> <span class="string">Email</span> <span class="string">||</span> <span class="string">&quot;#000000&quot;</span></span><br></pre></td></tr></table></figure>
<h2 id="6-头像">6 头像</h2>
<p>修改 <code>主题配置文件</code> ：</p>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">avatar:</span></span><br><span class="line">  <span class="attr">img:</span> <span class="string">/img/avatar.png</span></span><br><span class="line">  <span class="attr">effect:</span> <span class="literal">true</span> <span class="comment"># 头像会一直转圈</span></span><br></pre></td></tr></table></figure>
<h2 id="7-顶部图">7 顶部图</h2>
<blockquote>
<p>如果不需要，可配置 <code>disable_top_img: true</code></p>
</blockquote>
<blockquote>
<p>顶部图获取顺序:[如果都没有配置则不显示顶部图]</p>
<p>1.页面顶部图获取顺序：</p>
<p><code>各自配置的 top_img</code> &gt; <code>配置文件的 default_top_img</code></p>
<p>2.文章页顶部图获取顺序：</p>
<p><code>各自配置的 top_img</code> &gt; <code>cover</code> &gt; <code>配置文案金的 default_top_img</code></p>
</blockquote>
<p>配置中的值说明：</p>
<table>
<thead>
<tr>
<th>配置</th>
<th>解释</th>
</tr>
</thead>
<tbody>
<tr>
<td>index_img</td>
<td>主页的 top_img</td>
</tr>
<tr>
<td>default_top_img</td>
<td>默认的 top_img，当页面的 top_img 没有配置时，会显示 default_top_img</td>
</tr>
<tr>
<td>archive_img</td>
<td>归档页面的 top_img</td>
</tr>
<tr>
<td>tag_img</td>
<td>tag 子页面 的 默认 top_img</td>
</tr>
<tr>
<td>tag_per_img</td>
<td>tag 子页面的 top_img，可配置每个 tag 的 top_img</td>
</tr>
<tr>
<td>category_img</td>
<td>category 子页面 的 默认 top_img</td>
</tr>
<tr>
<td>category_per_img</td>
<td>category 子页面的 top_img，可配置每个 category 的 top_img</td>
</tr>
</tbody>
</table>
<p>其它页面 （tags/categories/自建页面）和 文章页 的 <code>top_img</code> ，可到对应的 md 页面设置front-matter中的<code>top_img</code></p>
<blockquote>
<p>以上所有 <code>top_img</code> 可配置如下：</p>
<table>
<thead>
<tr>
<th style="text-align:center">配置</th>
<th>效果</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">留空</td>
<td>显示默认的 top_img（如有），否则显示默认的顔色（文章页top_img留空的话，会显示 cover 的值）</td>
</tr>
<tr>
<td style="text-align:center">img链接</td>
<td>图片的链接，显示所配置的图片</td>
</tr>
<tr>
<td style="text-align:center">颜色</td>
<td>对应的顔色</td>
</tr>
<tr>
<td style="text-align:center">transparent</td>
<td>透明</td>
</tr>
<tr>
<td style="text-align:center">false</td>
<td>不显示 top_img</td>
</tr>
</tbody>
</table>
</blockquote>
<p><strong><code>tag_per_img</code> 和 <code>category_per_img</code> 是 3.2.0 新增的内容，可对 tag 和 category 进行单独的配置</strong></p>
<p><strong>!</strong> 但并不推荐，会拖慢生成速度</p>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="string">tag_per_img：</span></span><br><span class="line">  <span class="attr">aplayer:</span> <span class="string">https://xxxxxx.png</span></span><br><span class="line">  <span class="attr">android:</span> <span class="string">ddddddd.png</span></span><br><span class="line">  </span><br><span class="line"><span class="string">category_per_img：</span></span><br><span class="line">  <span class="string">随想:</span> <span class="string">hdhdh.png</span></span><br><span class="line">  <span class="string">推荐:</span> <span class="string">ddjdjdjd.png</span></span><br></pre></td></tr></table></figure>
<h2 id="8-文章封面">8 文章封面</h2>
<p>在文章页头的<code>Front-matter</code> 添加 <code>cover</code> ，并填上要显示的图片地址。</p>
<p>不配置cover会显示默认的cover。</p>
<p>不想显示可以设置为false。</p>
<blockquote>
<p>文章封面的获取顺序为 Front-matter的cover &gt; 配置文件的 default_cover &gt; false</p>
</blockquote>
<p>修改主题配置文件</p>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">cover:</span></span><br><span class="line">  <span class="comment"># 主页是否显示文章封面</span></span><br><span class="line">  <span class="attr">index_enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># 侧栏是否显示封面图</span></span><br><span class="line">  <span class="attr">aside_enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># 归档页面是否显示封面图</span></span><br><span class="line">  <span class="attr">archives_enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># 封面显示的位置</span></span><br><span class="line">  <span class="comment"># 三个值可配置 left , right , both(左右轮流)</span></span><br><span class="line">  <span class="attr">position:</span> <span class="string">both</span></span><br><span class="line">  <span class="comment"># 当没有设置cover时，默认的封面显示</span></span><br><span class="line">  <span class="attr">default_cover:</span> </span><br></pre></td></tr></table></figure>
<p>配置多张时会随机显示：</p>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">default_cover:</span></span><br><span class="line">  <span class="bullet">-</span> <span class="string">https://file.crazywong.com/gh/jerryc127/CDN@latest/cover/default_bg.png</span></span><br><span class="line">  <span class="bullet">-</span> <span class="string">https://file.crazywong.com/gh/jerryc127/CDN@latest/cover/default_bg2.png</span></span><br><span class="line">  <span class="bullet">-</span> <span class="string">https://file.crazywong.com/gh/jerryc127/CDN@latest/cover/default_bg3.png</span></span><br></pre></td></tr></table></figure>
<h2 id="9-页面meta显示">9 页面meta显示</h2>
<blockquote>
<p>设置显示文章的相关信息。</p>
</blockquote>
<p>修改<code>主题配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">post_meta:</span></span><br><span class="line">  <span class="attr">page:</span></span><br><span class="line">    <span class="attr">date_type:</span> <span class="string">both</span> <span class="comment"># created or updated or both 主页文章日期是创建日或者更新日或都显示</span></span><br><span class="line">    <span class="attr">date_format:</span> <span class="string">relative</span> <span class="comment"># date/relative 显示日期还是相对日期</span></span><br><span class="line">    <span class="attr">categories:</span> <span class="literal">true</span> <span class="comment"># true or false 主页是否显示分类</span></span><br><span class="line">    <span class="attr">tags:</span> <span class="literal">true</span> <span class="comment"># true or false 主页是否显示标签</span></span><br><span class="line">    <span class="attr">label:</span> <span class="literal">true</span> <span class="comment"># true or false 显示描述性文字</span></span><br><span class="line">  <span class="attr">post:</span></span><br><span class="line">    <span class="attr">date_type:</span> <span class="string">both</span> <span class="comment"># created or updated or both 文章页日期是创建日或者更新日或都显示</span></span><br><span class="line">    <span class="attr">date_format:</span> <span class="string">relative</span> <span class="comment"># date/relative 显示日期还是相对日期</span></span><br><span class="line">    <span class="attr">categories:</span> <span class="literal">true</span> <span class="comment"># true or false 文章页是否显示分类</span></span><br><span class="line">    <span class="attr">tags:</span> <span class="literal">true</span> <span class="comment"># true or false 文章页是否显示标签</span></span><br><span class="line">    <span class="attr">label:</span> <span class="literal">true</span> <span class="comment"># true or false 显示描述性文字</span></span><br></pre></td></tr></table></figure>
<h2 id="10-文章节选摘要和描述">10 文章节选摘要和描述</h2>
<p><code>主页文章节选</code> 支持<code>自动节选</code> 和 <code>文章页description</code></p>
<p>有四种选择：</p>
<ol>
<li class="lvl-3">
<p>description: 只显示description</p>
</li>
<li class="lvl-3">
<p>both:优先description，未设置则节选内容</p>
</li>
<li class="lvl-3">
<p>auto_excerpt:只显示自动节选</p>
</li>
<li class="lvl-3">
<p>false：不显示</p>
</li>
</ol>
<p>修改 <code>主题配置文件</code>：</p>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">index_post_content:</span></span><br><span class="line">  <span class="attr">method:</span> <span class="number">3</span></span><br><span class="line">  <span class="attr">length:</span> <span class="number">500</span> <span class="comment"># if you set method to 2 or 3, the length need to config</span></span><br></pre></td></tr></table></figure>
<h2 id="11-页面锚点">11 页面锚点</h2>
<p>开启页面锚点后，当你在进行滚动时，页面链接会根据标题ID进行替换<br>
(注意: 每替换一次，会留下一个历史记录。所以如果一篇文章有很多锚点的话，网页的历史记录会很多。)</p>
<p>修改 <code>主题配置文件</code> :</p>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># anchor</span></span><br><span class="line"><span class="comment"># when you scroll in post , the url will update according to header id.</span></span><br><span class="line"><span class="attr">anchor:</span></span><br><span class="line">  <span class="attr">button:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">    <span class="attr">always_show:</span> <span class="literal">false</span></span><br><span class="line">    <span class="attr">icon:</span> <span class="comment"># the unicode value of Font Awesome icon, such as &#x27;\3423&#x27;</span></span><br><span class="line">  <span class="attr">auto_update:</span> <span class="literal">false</span> <span class="comment"># when you scroll in post, the URL will update according to header id.</span></span><br></pre></td></tr></table></figure>
<h2 id="12-图片描述">12 图片描述</h2>
<p>可开启图片Figcaption描述文字显示</p>
<p>优先显示图片的 title 属性，然后是 alt 属性</p>
<p>修改 <code>主题配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">photofigcaption:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<h2 id="13-网页文字复制">13 网页文字复制</h2>
<p>可以配置是否可以复制、复制的内容是否添加版权信息。</p>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># copy settings</span></span><br><span class="line"><span class="comment"># copyright: Add the copyright information after copied content (复制的内容后面加上版权信息)</span></span><br><span class="line"><span class="attr">copy:</span></span><br><span class="line">  <span class="comment"># 是否开启网站复制权限</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># 复制的内容后面加上版权信息</span></span><br><span class="line">  <span class="attr">copyright:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="comment"># 字数限制，当复制文字大于这个字数限制时，将在复制的内容后面加上版权信息</span></span><br><span class="line">    <span class="attr">limit_count:</span> <span class="number">50</span></span><br></pre></td></tr></table></figure>
<h2 id="14-文章页相关配置">14 文章页相关配置</h2>
<h3 id="14-1-文章版权">14.1 文章版权</h3>
<blockquote>
<p>为你的博客文章展示文章版权和许可协议。</p>
</blockquote>
<p>修改 <code>主题配置文件</code>：</p>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">post_copyright:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">decode:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">author_href:</span></span><br><span class="line">  <span class="attr">license:</span> <span class="string">CC</span> <span class="string">BY-NC-SA</span> <span class="number">4.0</span></span><br><span class="line">  <span class="attr">license_url:</span> <span class="string">https://creativecommons.org/licenses/by-nc-sa/4.0/</span></span><br></pre></td></tr></table></figure>
<p>可在文章的Foront-matter的<code>copyright_xxx</code> 单独设置是否展示。</p>
<h3 id="14-2-文章打赏">14.2 文章打赏</h3>
<p>在文章的结尾添加打赏按钮，配置二维码：</p>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">reward:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">QR_code:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">img:</span> <span class="string">/img/wechat.jpg</span></span><br><span class="line">      <span class="attr">link:</span></span><br><span class="line">      <span class="attr">text:</span> <span class="string">微信</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">img:</span> <span class="string">/img/alipay.jpg</span></span><br><span class="line">      <span class="attr">link:</span></span><br><span class="line">      <span class="attr">text:</span> <span class="string">支付宝</span></span><br></pre></td></tr></table></figure>
<h3 id="14-3-TOC">14.3 TOC</h3>
<p>在文章页有一个目录显示TOC</p>
<p>修改 <code>主题配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">toc:</span></span><br><span class="line">  <span class="comment"># 文章页是否显示TOC</span></span><br><span class="line">  <span class="attr">post:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># 普通页是否显示TOC</span></span><br><span class="line">  <span class="attr">page:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># 是否显示章节数</span></span><br><span class="line">  <span class="attr">number:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># 是否展开TOC</span></span><br><span class="line">  <span class="attr">expand:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 简介模式（侧边栏只显示 TOC, 只对文章页有效）</span></span><br><span class="line">  <span class="attr">style_simple:</span> <span class="literal">false</span> <span class="comment"># for post</span></span><br><span class="line">  <span class="comment"># 是否显示滚动进度百分比</span></span><br><span class="line">  <span class="attr">scroll_percent:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<p>在文章md头部加入 <code>toc_num</code> 和 <code>toc</code> ，配置 true或false即可。</p>
<h3 id="14-4-相关文章">14.4 相关文章</h3>
<blockquote>
<p>当文章封面设置为false时，相关文章背景会显示主题色；</p>
<p>相关文章推荐原理是tags的比重。</p>
</blockquote>
<p>修改 <code>主题配置文件</code> ：</p>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">related_post:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">limit:</span> <span class="number">6</span> <span class="comment"># 显示推荐文章数目</span></span><br><span class="line">  <span class="attr">date_type:</span> <span class="string">created</span> <span class="comment"># or created or updated 文章日期显示创建日或者更新日</span></span><br></pre></td></tr></table></figure>
<h3 id="14-5-文章过期提醒">14.5 文章过期提醒</h3>
<p>将以更新时间为基准显示文章是否过期</p>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># Displays outdated notice for a post (文章过期提醒)</span></span><br><span class="line"><span class="attr">noticeOutdate:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">style:</span> <span class="string">flat</span> <span class="comment"># style: simple/flat</span></span><br><span class="line">  <span class="comment"># 距离更新时间多少天才显示文章过期提醒</span></span><br><span class="line">  <span class="attr">limit_day:</span> <span class="number">365</span> <span class="comment"># When will it be shown</span></span><br><span class="line">  <span class="attr">position:</span> <span class="string">top</span> <span class="comment"># position: top/bottom</span></span><br><span class="line">  <span class="comment"># 天数之前的文字</span></span><br><span class="line">  <span class="attr">message_prev:</span> <span class="string">It</span> <span class="string">has</span> <span class="string">been</span></span><br><span class="line">  <span class="comment"># 天数之后的文字</span></span><br><span class="line">  <span class="attr">message_next:</span> <span class="string">days</span> <span class="string">since</span> <span class="string">the</span> <span class="string">last</span> <span class="string">update,</span> <span class="string">the</span> <span class="string">content</span> <span class="string">of</span> <span class="string">the</span> <span class="string">article</span> <span class="string">may</span> <span class="string">be</span> <span class="string">outdated.</span></span><br></pre></td></tr></table></figure>
<h3 id="14-6-文章编辑按钮">14.6 文章编辑按钮</h3>
<p>文章标题旁的编辑按钮，点击会跳转到对应链接。</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line"># Post edit</span><br><span class="line"># Easily browse and edit blog source code online.</span><br><span class="line">post_edit:</span><br><span class="line">  enable: false</span><br><span class="line">  # url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name/</span><br><span class="line">  # For example: https://github.com/jerryc127/butterfly.js.org/edit/main/source/</span><br><span class="line">  url:</span><br></pre></td></tr></table></figure>
<h3 id="14-7-文章分页按钮">14.7 文章分页按钮</h3>
<p>可以设置分页逻辑或关闭</p>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># post_pagination (分页)</span></span><br><span class="line"><span class="comment"># value: 1 || 2 || false</span></span><br><span class="line"><span class="comment"># 1: The &#x27;next post&#x27; will link to old post</span></span><br><span class="line"><span class="comment"># 2: The &#x27;next post&#x27; will link to new post</span></span><br><span class="line"><span class="comment"># false: disable pagination</span></span><br><span class="line"><span class="attr">post_pagination:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure>
<h2 id="15-Footer">15 Footer</h2>
<h3 id="15-1-博客年份">15.1 博客年份</h3>
<p><code>since</code> 是一个展示站点起始时间的选项</p>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">footer:</span></span><br><span class="line">  <span class="attr">owner:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">since:</span> <span class="number">2018</span></span><br></pre></td></tr></table></figure>
<h3 id="15-2-页脚自定义脚本">15.2 页脚自定义脚本</h3>
<p><code>custom_text</code>是一个用来在页脚自定义文本的选项。通常在这里写声明文本等。支持 HTML</p>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">custom_text:</span> <span class="string">Hi,</span> <span class="string">welcome</span> <span class="string">to</span> <span class="string">my</span> <span class="string">&lt;a</span> <span class="string">href=&quot;https://butterfly.js.org/&quot;&gt;blog&lt;/a&gt;!</span></span><br></pre></td></tr></table></figure>
<h2 id="16-侧边栏设置">16 侧边栏设置</h2>
<h3 id="16-1-侧边排版">16.1 侧边排版</h3>
<p>可自行决定显式的项目以及位置，也可以不显示。</p>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">aside:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">hide:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">button:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">true</span> <span class="comment"># display on mobile</span></span><br><span class="line">  <span class="attr">position:</span> <span class="string">right</span> <span class="comment"># left or right</span></span><br><span class="line">  <span class="attr">display:</span></span><br><span class="line">    <span class="attr">archive:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">tag:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">category:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">card_author:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">description:</span></span><br><span class="line">    <span class="attr">button:</span></span><br><span class="line">      <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">      <span class="attr">icon:</span> <span class="string">fab</span> <span class="string">fa-github</span></span><br><span class="line">      <span class="attr">text:</span> <span class="string">Follow</span> <span class="string">Me</span></span><br><span class="line">      <span class="attr">link:</span> <span class="string">https://github.com/xxxxxx</span></span><br><span class="line">  <span class="attr">card_announcement:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">content:</span> <span class="string">This</span> <span class="string">is</span> <span class="string">my</span> <span class="string">Blog</span></span><br><span class="line">  <span class="attr">card_recent_post:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">limit:</span> <span class="number">5</span> <span class="comment"># if set 0 will show all</span></span><br><span class="line">    <span class="attr">sort:</span> <span class="string">date</span> <span class="comment"># date or updated</span></span><br><span class="line">    <span class="attr">sort_order:</span> <span class="comment"># Don&#x27;t modify the setting unless you know how it works</span></span><br><span class="line">  <span class="attr">card_categories:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">limit:</span> <span class="number">8</span> <span class="comment"># if set 0 will show all</span></span><br><span class="line">    <span class="attr">expand:</span> <span class="string">none</span> <span class="comment"># none/true/false</span></span><br><span class="line">    <span class="attr">sort_order:</span> <span class="comment"># Don&#x27;t modify the setting unless you know how it works</span></span><br><span class="line">  <span class="attr">card_tags:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">limit:</span> <span class="number">40</span> <span class="comment"># if set 0 will show all</span></span><br><span class="line">    <span class="attr">color:</span> <span class="literal">false</span></span><br><span class="line">    <span class="attr">orderby:</span> <span class="string">random</span> <span class="comment"># Order of tags, random/name/length</span></span><br><span class="line">    <span class="attr">order:</span> <span class="number">1</span> <span class="comment"># Sort of order. 1, asc for ascending; -1, desc for descending</span></span><br><span class="line">    <span class="attr">sort_order:</span> <span class="comment"># Don&#x27;t modify the setting unless you know how it works</span></span><br><span class="line">  <span class="attr">card_archives:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">type:</span> <span class="string">monthly</span> <span class="comment"># yearly or monthly</span></span><br><span class="line">    <span class="attr">format:</span> <span class="string">MMMM</span> <span class="string">YYYY</span> <span class="comment"># eg: YYYY年MM月</span></span><br><span class="line">    <span class="attr">order:</span> <span class="number">-1</span> <span class="comment"># Sort of order. 1, asc for ascending; -1, desc for descending</span></span><br><span class="line">    <span class="attr">limit:</span> <span class="number">8</span> <span class="comment"># if set 0 will show all</span></span><br><span class="line">    <span class="attr">sort_order:</span> <span class="comment"># Don&#x27;t modify the setting unless you know how it works</span></span><br><span class="line">  <span class="attr">card_webinfo:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">post_count:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">last_push_date:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">sort_order:</span> <span class="comment"># Don&#x27;t modify the setting unless you know how it works</span></span><br></pre></td></tr></table></figure>
<h3 id="16-2-访问人数">16.2 访问人数</h3>
<p>访问<a target="_blank" rel="noopener" href="http://busuanzi.ibruce.info/">busuanzi官网</a> 可查看更多详情。</p>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">busuanzi:</span></span><br><span class="line">  <span class="attr">site_uv:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">site_pv:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">page_pv:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<p>如果需要修改 <code>busuanzi</code> 的 CDN 链接，可通过 主题配置文件 的 CDN 中的 option 进行修改</p>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">CDN:</span></span><br><span class="line">  <span class="attr">option:</span></span><br><span class="line">  	<span class="attr">busuanzi:</span> <span class="string">xxxxxxxxx</span></span><br></pre></td></tr></table></figure>
<h3 id="16-3-运行时间">16.3 运行时间</h3>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">runtimeshow:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">publish_date:</span> <span class="number">6</span><span class="string">/7/2018</span> <span class="number">00</span><span class="string">:00:00</span>  </span><br><span class="line">  <span class="comment">##网页开通时间</span></span><br><span class="line">  <span class="comment">#格式: 月/日/年 时间</span></span><br><span class="line">  <span class="comment">#也可以写成 年/月/日 时间</span></span><br></pre></td></tr></table></figure>
<h3 id="16-4-最新评论">16.4 最新评论</h3>
<blockquote>
<p>最新评论只会在刷新时才会去读取，并不会实时变化。</p>
<p>由于 API 有 访问次数限制，为了避免调用太多，主题默认存取期限为 10 分钟。也就是説，调用后资料会存在 <em>localStorage</em> 里，10分钟内刷新网站只会去 <em>localStorage</em> 读取资料。 10 分钟期限一过，刷新页面时才会去调取 API 读取新的数据。（ 3.6.0 新增了 <code>storage</code> 配置，可自行配置缓存时间）</p>
</blockquote>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># Aside widget - Newest Comments</span></span><br><span class="line"><span class="attr">newest_comments:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">sort_order:</span> <span class="comment"># Don&#x27;t modify the setting unless you know how it works</span></span><br><span class="line">  <span class="comment"># 显示数量</span></span><br><span class="line">  <span class="attr">limit:</span> <span class="number">6</span></span><br><span class="line">  <span class="comment"># 缓存时间</span></span><br><span class="line">  <span class="attr">storage:</span> <span class="number">10</span> <span class="comment"># unit: mins, save data to localStorage</span></span><br><span class="line">  <span class="comment"># 是否显示头像</span></span><br><span class="line">  <span class="attr">avatar:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<h3 id="16-5-自定义添加栏目">16.5 自定义添加栏目</h3>
<blockquote>
<p>适用于 &gt;= 3.8.0</p>
<p>可添加自己的 <code>widget</code>，也可以对现有的 <code>widget</code> 进行排序（<code>博客资料</code>和 <code>公告</code>这两个固定，其它的能排序）</p>
</blockquote>
<h4 id="16-5-1-widget排序">16.5.1 widget排序</h4>
<p>只需要配置 <code>sort_order</code>就行。（使用了 <code>Flex</code> 佈局的 <code>order</code> 属性，具体可查看 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">mozilla</a> 文档。简单来讲，就是配置数字来实现排序，如果不配置，则默认为 0。数字越小，排序越靠前。</p>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">aside:</span></span><br><span class="line"> <span class="string">...</span></span><br><span class="line">  <span class="attr">card_recent_post:</span></span><br><span class="line">    <span class="attr">sort_order:</span> <span class="comment"># Don&#x27;t modify the setting unless you know how it works</span></span><br><span class="line">  <span class="attr">card_categories:</span></span><br><span class="line">    <span class="attr">sort_order:</span> <span class="comment"># Don&#x27;t modify the setting unless you know how it works</span></span><br><span class="line">  <span class="attr">card_tags:</span></span><br><span class="line">    <span class="attr">sort_order:</span> <span class="comment"># Don&#x27;t modify the setting unless you know how it works</span></span><br><span class="line">  <span class="attr">card_archives:</span></span><br><span class="line">    <span class="attr">sort_order:</span> <span class="comment"># Don&#x27;t modify the setting unless you know how it works</span></span><br><span class="line">  <span class="attr">card_webinfo:</span></span><br><span class="line">    <span class="attr">sort_order:</span> <span class="comment"># Don&#x27;t modify the setting unless you know how it works</span></span><br><span class="line"></span><br><span class="line"><span class="attr">newest_comments:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">sort_order:</span> <span class="comment"># Don&#x27;t modify the setting unless you know how it works</span></span><br></pre></td></tr></table></figure>
<h4 id="16-5-2-自定义widget">16.5.2 自定义widget</h4>
<ol>
<li class="lvl-3">
<p>创建widget.yml</p>
</li>
</ol>
<p>在<code>Hexo</code>博客目录中的<code>source/_data</code>（如果没有 _data 文件夹，请自行创建），创建一个文件 <code>widget.yml</code></p>
<ol start="2">
<li class="lvl-3">
<p>格式：</p>
</li>
</ol>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 创建的 widget 会出现在非 sticky 区域（即所有页面都会显示)</span></span><br><span class="line"><span class="attr">top:</span></span><br><span class="line">    <span class="comment"># 所创建的 widget 父类 class 名 （可选）</span></span><br><span class="line">  <span class="bullet">-</span> <span class="attr">class_name:</span></span><br><span class="line">    <span class="comment"># 所创建的 widget 父类 id 名（可选）</span></span><br><span class="line">    <span class="attr">id_name:</span></span><br><span class="line">    <span class="comment"># 所创建的 widget 标题</span></span><br><span class="line">    <span class="attr">name:</span></span><br><span class="line">    <span class="comment"># 所创建的 widget 图标</span></span><br><span class="line">    <span class="attr">icon:</span></span><br><span class="line">    <span class="comment"># 所创建的 widget 相关代码</span></span><br><span class="line">    <span class="attr">html:</span></span><br><span class="line"><span class="comment"># 创建的 widget 会出现在 sticky 区域（除了文章页都会显示)</span></span><br><span class="line"><span class="attr">bottom:</span></span><br><span class="line">  <span class="bullet">-</span> <span class="attr">class_name:</span></span><br><span class="line">    <span class="attr">id_name:</span></span><br><span class="line">    <span class="attr">name:</span></span><br><span class="line">    <span class="attr">icon:</span></span><br><span class="line">    <span class="comment"># 所创建的 widget 排序 （可选）</span></span><br><span class="line">    <span class="attr">order:</span></span><br><span class="line">    <span class="attr">html:</span></span><br></pre></td></tr></table></figure>
<p>生成的代码为：</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;card-widget 所写的 class_name&quot;</span> <span class="attr">id</span>=<span class="string">&quot;所写的 id_name&quot;</span> <span class="attr">style</span>=<span class="string">&quot;order: 所写的 order&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;item-headline&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;所写的 icon&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">span</span>&gt;</span>所写的 name<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;item-content&quot;</span>&gt;</span></span><br><span class="line">        所写的 html</span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>如果需要对添加的 widget 进行 UI 调整，请自行添加 css 到 inject 去。</p>
<h4 id="16-5-3-示例">16.5.3 示例</h4>
<p><strong>访客地图：</strong></p>
<ol>
<li class="lvl-3">
<p>获取方可地图的html代码</p>
</li>
</ol>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">id</span>=<span class="string">&quot;clstr_globe&quot;</span> <span class="attr">src</span>=<span class="string">&quot;//clustrmaps.com/globe.js?d=5V2tOKp8qAdRM-i8eu7ETTO9ugt5uKbbG-U7Yj8uMl8&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ol start="2">
<li class="lvl-3">
<p>创建 widget.yml</p>
</li>
</ol>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">bottom:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">class_name:</span> <span class="string">user-map</span></span><br><span class="line">      <span class="attr">id_name:</span> <span class="string">user-map</span></span><br><span class="line">      <span class="attr">name:</span> <span class="string">访客地图</span></span><br><span class="line">      <span class="attr">icon:</span> <span class="string">fas</span> <span class="string">fa-heartbeat</span></span><br><span class="line">      <span class="attr">order:</span></span><br><span class="line">      <span class="attr">html:</span> <span class="string">&#x27;&lt;script type=&quot;text/javascript&quot; id=&quot;clstr_globe&quot; src=&quot;//clustrmaps.com/globe.js?d=5V2tOKp8qAdRM-i8eu7ETTO9ugt5uKbbG-U7Yj8uMl8&quot;&gt;&lt;/script&gt;&#x27;</span></span><br></pre></td></tr></table></figure>
<p>3.运行hexo即可。</p>
<h2 id="17-右下角按钮">17 右下角按钮</h2>
<h3 id="17-1-简繁转换">17.1 简繁转换</h3>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">translate:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># 默认按钮显示文字(网站是简体，应设置为&#x27;default: 繁&#x27;)</span></span><br><span class="line">  <span class="attr">default:</span> <span class="string">简</span></span><br><span class="line">  <span class="comment">#网站默认语言，1: 繁体中文, 2: 简体中文</span></span><br><span class="line">  <span class="attr">defaultEncoding:</span> <span class="number">1</span></span><br><span class="line">  <span class="comment">#延迟时间,若不在前, 要设定延迟翻译时间, 如100表示100ms,默认为0</span></span><br><span class="line">  <span class="attr">translateDelay:</span> <span class="number">0</span></span><br><span class="line">  <span class="comment">#当文字是简体时，按钮显示的文字</span></span><br><span class="line">  <span class="attr">msgToTraditionalChinese:</span> <span class="string">&quot;繁&quot;</span></span><br><span class="line">  <span class="comment">#当文字是繁体时，按钮显示的文字</span></span><br><span class="line">  <span class="attr">msgToSimplifiedChinese:</span> <span class="string">&quot;简&quot;</span></span><br></pre></td></tr></table></figure>
<h3 id="17-2-阅读模式">17.2 阅读模式</h3>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">readmode:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<h3 id="17-3-夜间模式">17.3 夜间模式</h3>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># dark mode</span></span><br><span class="line"><span class="attr">darkmode:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># dark mode和 light mode切换按钮 	是否在右下角显示日夜模式切换按钮</span></span><br><span class="line">  <span class="attr">button:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">autoChangeMode:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Set the light mode time. The value is between 0 and 24. If not set, the default value is 6 and 18</span></span><br><span class="line">  <span class="attr">start:</span> <span class="comment"># 8</span></span><br><span class="line">  <span class="attr">end:</span> <span class="comment"># 22</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>自动切换的模式<br>
autoChangeMode: 1 跟随系统而变化，不支持的浏览器/系统将按照时间 start 到 end 之间切换为 light mode<br>
autoChangeMode: 2 只按照时间 start 到 end 之间切换为 light mode ,其余时间为 dark mode<br>
autoChangeMode: false 取消自动切换</p>
</blockquote>
<h3 id="17-4-滚动状态百分比">17.4 滚动状态百分比</h3>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># show scroll percent in scroll-to-top button</span></span><br><span class="line"><span class="attr">rightside_scroll_percent:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<h3 id="17-5-按钮排序">17.5 按钮排序</h3>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># Don&#x27;t modify the following settings unless you know how they work (非必要请不要修改 )</span></span><br><span class="line"><span class="comment"># Choose: readmode,translate,darkmode,hideAside,toc,chat,comment</span></span><br><span class="line"><span class="comment"># Don&#x27;t repeat 不要重复</span></span><br><span class="line"><span class="attr">rightside_item_order:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">hide:</span> <span class="comment"># readmode,translate,darkmode,hideAside</span></span><br><span class="line">  <span class="attr">show:</span> <span class="comment"># toc,chat,comment</span></span><br></pre></td></tr></table></figure>
<h2 id="18-标签外挂">18 标签外挂</h2>
<h3 id="18-1-Note">18.1 Note</h3>
<p>即类似引用块的标签块带上图标：</p>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">note:</span></span><br><span class="line">  <span class="comment"># Note tag style values:</span></span><br><span class="line">  <span class="comment">#  - simple    bs-callout old alert style. Default.</span></span><br><span class="line">  <span class="comment">#  - modern    bs-callout new (v2-v3) alert style.</span></span><br><span class="line">  <span class="comment">#  - flat      flat callout style with background, like on Mozilla or StackOverflow.</span></span><br><span class="line">  <span class="comment">#  - disabled  disable all CSS styles import of note tag.</span></span><br><span class="line">  <span class="attr">style:</span> <span class="string">simple</span></span><br><span class="line">  <span class="attr">icons:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">border_radius:</span> <span class="number">3</span></span><br><span class="line">  <span class="comment"># Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).</span></span><br><span class="line">  <span class="comment"># Offset also applied to label tag variables. This option can work with disabled note tag.</span></span><br><span class="line">  <span class="attr">light_bg_offset:</span> <span class="number">0</span></span><br></pre></td></tr></table></figure>
<ol>
<li class="lvl-3">
<p>默认用法：</p>
</li>
</ol>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">&#123;% note [class] [no-icon] [style] %&#125;</span><br><span class="line">Any content (support inline tags too.io).</span><br><span class="line">&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure>
<table>
<thead>
<tr>
<th>名称</th>
<th>用法</th>
</tr>
</thead>
<tbody>
<tr>
<td>class</td>
<td>【可选】标识，不同的标识有不同的配色<br/>（ default / primary / success / info / warning / danger ）</td>
</tr>
<tr>
<td>no-icon</td>
<td>【可选】不显示 icon</td>
</tr>
<tr>
<td>style</td>
<td>【可选】可以覆盖配置中的 style<br/>（simple/modern/flat/disabled）</td>
</tr>
</tbody>
</table>
<ol start="2">
<li class="lvl-3">
<p>自定义icon</p>
</li>
</ol>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">&#123;% note [color] [icon] [style] %&#125;</span><br><span class="line">Any content (support inline tags too.io).</span><br><span class="line">&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure>
<div class="note info simple"><p>color:【可选】颜色 (default / blue / pink / red / purple / orange / green)</p>
<p>icon:【可选】可配置自定义 icon (只支持 fontawesome 图标, 也可以配置 no-icon )</p>
</div>
<h3 id="18-2-Gallery相册图库">18.2 Gallery相册图库</h3>
<p>一个图库集合</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;gallery-group-main&quot;</span>&gt;</span></span><br><span class="line">&#123;% galleryGroup name description link img-url %&#125;</span><br><span class="line">&#123;% galleryGroup name description link img-url %&#125;</span><br><span class="line">&#123;% galleryGroup name description link img-url %&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ul class="lvl-0">
<li class="lvl-2">
<p>name：图库名字</p>
</li>
<li class="lvl-2">
<p>description：图库描述</p>
</li>
<li class="lvl-2">
<p>link：连接到对应相册的地址</p>
</li>
<li class="lvl-2">
<p>img-url：图库封面的地址</p>
</li>
</ul>
<p>如：</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;gallery-group-main&quot;</span>&gt;</span></span><br><span class="line">&#123;% galleryGroup &#x27;壁纸&#x27; &#x27;收藏的一些壁纸&#x27; &#x27;/Gallery/wallpaper&#x27; https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png %&#125;</span><br><span class="line">&#123;% galleryGroup &#x27;漫威&#x27; &#x27;关于漫威的图片&#x27; &#x27;/Gallery/marvel&#x27; https://i.loli.net/2019/12/25/8t97aVlp4hgyBGu.jpg %&#125;</span><br><span class="line">&#123;% galleryGroup &#x27;OH MY GIRL&#x27; &#x27;关于OH MY GIRL的图片&#x27; &#x27;/Gallery/ohmygirl&#x27; https://i.loli.net/2019/12/25/hOqbQ3BIwa6KWpo.jpg %&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="18-3-Gallery相册">18.3 Gallery相册</h3>
<p>新的 Gallery 相册会自动根据图片长度进行排版，书写也更加方便，与 markdown 格式一样。可根据需要插入到相应的 md。</p>
<ol>
<li class="lvl-3">
<p>本地</p>
</li>
</ol>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">&#123;% gallery [lazyload],[rowHeight],[limit] %&#125;</span><br><span class="line">markdown 图片格式</span><br><span class="line">&#123;% endgallery %&#125;</span><br></pre></td></tr></table></figure>
<table>
<thead>
<tr>
<th>参数</th>
<th>解释</th>
</tr>
</thead>
<tbody>
<tr>
<td>lazyload</td>
<td>【可选】点击按钮加载更多图片，填写 true/false。默认为 false</td>
</tr>
<tr>
<td>rowHeight</td>
<td>【可选】图片显示的高度，如果需要一行显示更多的图片，可设置更小的数字。默认为 220。</td>
</tr>
<tr>
<td>limit</td>
<td>【可选】每次加载多少张照片。默认为 10。</td>
</tr>
</tbody>
</table>
<p>示例：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">&#123;% gallery %&#125;</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg</span>)</span><br><span class="line">&#123;% endgallery %&#125;</span><br></pre></td></tr></table></figure>
<ol start="2">
<li class="lvl-3">
<p>远程拉取</p>
</li>
</ol>
<p>写法：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">&#123;% gallery url,[link],[lazyload],[rowHeight],[limit] %&#125;</span><br><span class="line">&#123;% endgallery %&#125;</span><br></pre></td></tr></table></figure>
<table>
<thead>
<tr>
<th>参数</th>
<th>解释</th>
</tr>
</thead>
<tbody>
<tr>
<td>url</td>
<td>【必须】 识别词</td>
</tr>
<tr>
<td>link</td>
<td>【必须】远程的 json 链接</td>
</tr>
<tr>
<td>lazyload</td>
<td>【可选】点击按钮加载更多图片，填写 true/false。默认为 false。</td>
</tr>
<tr>
<td>rowHeight</td>
<td>【可选】图片显示的高度，如果需要一行显示更多的图片，可设置更小的数字。默认为 220。</td>
</tr>
<tr>
<td>limit</td>
<td>【可选】每次加载多少张照片。默认为 10。</td>
</tr>
</tbody>
</table>
<p>远程链接返回的json格式：</p>
<figure class="highlight json"><table><tr><td class="code"><pre><span class="line"><span class="punctuation">[</span></span><br><span class="line">  <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;url&quot;</span><span class="punctuation">:</span> <span class="string">&quot;https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/IMG_0556.jpg&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;alt&quot;</span><span class="punctuation">:</span> <span class="string">&quot;IMG_0556.jpg&quot;</span><span class="punctuation">,</span></span><br><span class="line">     <span class="attr">&quot;title&quot;</span><span class="punctuation">:</span> <span class="string">&quot;这是title&quot;</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;url&quot;</span><span class="punctuation">:</span> <span class="string">&quot;https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/IMG_0472.jpg&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;alt&quot;</span><span class="punctuation">:</span> <span class="string">&quot;IMG_0472.jpg&quot;</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;url&quot;</span><span class="punctuation">:</span> <span class="string">&quot;https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/IMG_0453.jpg&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;alt&quot;</span><span class="punctuation">:</span> <span class="string">&quot;&quot;</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;url&quot;</span><span class="punctuation">:</span> <span class="string">&quot;https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/IMG_0931.jpg&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;alt&quot;</span><span class="punctuation">:</span> <span class="string">&quot;&quot;</span></span><br><span class="line">  <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">]</span></span><br></pre></td></tr></table></figure>
<h3 id="18-4-tag-hide">18.4 tag-hide</h3>
<p>如果你想把一些文字、内容隐藏起来，并提供按钮让用户点击显示。可以使用这个标签外挂。</p>
<ol>
<li class="lvl-3">
<p>inline: 仅限文字</p>
</li>
</ol>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">&#123;% hideInline content,display,bg,color %&#125;</span><br></pre></td></tr></table></figure>
<p>如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">门里站着一个人? &#123;% hideInline 闪 %&#125;</span><br></pre></td></tr></table></figure>
<span class="hide-inline"><button type="button" class="hide-button" style="">Click
  </button><span class="hide-content">闪</span></span>
<ol start="2">
<li class="lvl-3">
<p>Block：可以隐藏很多内容，包括图片，代码块等等</p>
</li>
</ol>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">&#123;% hideBlock display,bg,color %&#125;</span><br><span class="line">content</span><br><span class="line">&#123;% endhideBlock %&#125;</span><br></pre></td></tr></table></figure>
<div class="note info simple"><p>( display 不能包含英文逗号，可用<code>&amp;sbquo;</code>)</p>
</div>
<ul class="lvl-0">
<li class="lvl-2">
<p>content: 文本内容</p>
</li>
<li class="lvl-2">
<p>display: 按钮显示的文字(可选)</p>
</li>
<li class="lvl-2">
<p>bg: 按钮的背景颜色(可选)</p>
</li>
<li class="lvl-2">
<p>color: 按钮文字的颜色(可选)</p>
</li>
</ul>
<p>如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">查看答案</span><br><span class="line">&#123;% hideBlock 查看答案 %&#125;</span><br><span class="line">傻子，怎么可能有答案</span><br><span class="line">&#123;% endhideBlock %&#125;</span><br></pre></td></tr></table></figure>
<div class="hide-block"><button type="button" class="hide-button" style="">查看答案
    </button><div class="hide-content"><p>傻子，怎么可能有答案</p>
</div></div>
<ol start="3">
<li class="lvl-3">
<p>Toogle:展示的内容太多，可以把它隐藏在收缩框里，需要时再把它展开。</p>
</li>
</ol>
<div class="note info simple"><p>( display 不能包含英文逗号，可用<code>&amp;sbquo;</code>)</p>
</div>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">&#123;% hideToggle display,bg,color %&#125;</span><br><span class="line">content</span><br><span class="line">&#123;% endhideToggle %&#125;</span><br></pre></td></tr></table></figure>
<p>如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">&#123;% hideToggle Butterfly安装方法 %&#125;</span><br><span class="line">在你的博客根目录里</span><br><span class="line"></span><br><span class="line">git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly</span><br><span class="line"></span><br><span class="line">如果想要安装比较新的dev分支，可以</span><br><span class="line"></span><br><span class="line">git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly</span><br><span class="line"></span><br><span class="line">&#123;% endhideToggle %&#125;</span><br></pre></td></tr></table></figure>
<details class="toggle" ><summary class="toggle-button" style="">Butterfly安装方法</summary><div class="toggle-content"><p>在你的博客根目录里</p>
<p>git clone -b master <a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly.git">https://github.com/jerryc127/hexo-theme-butterfly.git</a> themes/Butterfly</p>
<p>如果想要安装比较新的dev分支，可以</p>
<p>git clone -b dev <a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly.git">https://github.com/jerryc127/hexo-theme-butterfly.git</a> themes/Butterfly</p>
</div></details>
<h3 id="18-5-mermaid">18.5 mermaid</h3>
<p>使用mermaid标签可以绘制Flowchart（流程图）、Sequence diagram（时序图 ）、Class Diagram（类别图）、State Diagram（状态图）、Gantt（甘特图）和Pie Chart（圆形图），具体可以查看<a target="_blank" rel="noopener" href="https://mermaid.js.org/#/">Mermaid文档</a> 。</p>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># mermaid</span></span><br><span class="line"><span class="comment"># see https://github.com/mermaid-js/mermaid</span></span><br><span class="line"><span class="attr">mermaid:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># built-in themes: default/forest/dark/neutral</span></span><br><span class="line">  <span class="attr">theme:</span></span><br><span class="line">    <span class="attr">light:</span> <span class="string">default</span></span><br><span class="line">    <span class="attr">dark:</span> <span class="string">dark</span></span><br></pre></td></tr></table></figure>
<p>写法：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">&#123;% mermaid %&#125;</span><br><span class="line">内容</span><br><span class="line">&#123;% endmermaid %&#125;</span><br></pre></td></tr></table></figure>
<p>如：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">&#123;% mermaid %&#125;</span><br><span class="line">pie</span><br><span class="line"><span class="code">    title Key elements in Product X</span></span><br><span class="line"><span class="code">    &quot;Calcium&quot; : 42.96</span></span><br><span class="line"><span class="code">    &quot;Potassium&quot; : 50.05</span></span><br><span class="line"><span class="code">    &quot;Magnesium&quot; : 10.01</span></span><br><span class="line"><span class="code">    &quot;Iron&quot; :  5</span></span><br><span class="line"><span class="code">&#123;% endmermaid %&#125;</span></span><br></pre></td></tr></table></figure>
<p>效果：</p>
<div class="mermaid-wrap"><pre class="mermaid-src" hidden>
  pie
    title Key elements in Product X
    &quot;Calcium&quot; : 42.96
    &quot;Potassium&quot; : 50.05
    &quot;Magnesium&quot; : 10.01
    &quot;Iron&quot; :  5
  </pre></div>
<h3 id="18-5-Tabs">18.5 Tabs</h3>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">&#123;% tabs Unique name, [index] %&#125;</span><br><span class="line">&lt;!-- tab [Tab caption] [@icon] --&gt;</span><br><span class="line">Any content (support inline tags too).</span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line">&#123;% endtabs %&#125;</span><br><span class="line"></span><br><span class="line">Unique name   : Unique name of tabs block tag without comma.</span><br><span class="line"><span class="code">                Will be used in #id&#x27;s as prefix for each tab with their index numbers.</span></span><br><span class="line"><span class="code">                If there are whitespaces in name, for generate #id all whitespaces will replaced by dashes.</span></span><br><span class="line"><span class="code">                Only for current url of post/page must be unique!</span></span><br><span class="line"><span class="code">[index]       : Index number of active tab.</span></span><br><span class="line"><span class="code">                If not specified, first tab (1) will be selected.</span></span><br><span class="line"><span class="code">                If index is -1, no tab will be selected. It&#x27;s will be something like spoiler.</span></span><br><span class="line"><span class="code">                Optional parameter.</span></span><br><span class="line"><span class="code">[Tab caption] : Caption of current tab.</span></span><br><span class="line"><span class="code">                If not caption specified, unique name with tab index suffix will be used as caption of tab.</span></span><br><span class="line"><span class="code">                If not caption specified, but specified icon, caption will empty.</span></span><br><span class="line"><span class="code">                Optional parameter.</span></span><br><span class="line"><span class="code">[@icon]       : FontAwesome icon name (full-name, look like &#x27;fas fa-font&#x27;)</span></span><br><span class="line"><span class="code">                Can be specified with or without space; e.g. &#x27;Tab caption @icon&#x27; similar to &#x27;Tab caption@icon&#x27;.</span></span><br><span class="line"><span class="code">                Optional parameter.</span></span><br></pre></td></tr></table></figure>
<p>写法：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">&#123;% tabs test1 %&#125;</span><br><span class="line">&lt;!-- tab --&gt;</span><br><span class="line"><span class="strong">**This is Tab 1.**</span></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- tab --&gt;</span><br><span class="line"><span class="strong">**This is Tab 2.**</span></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- tab --&gt;</span><br><span class="line"><span class="strong">**This is Tab 3.**</span></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line">&#123;% endtabs %&#125;</span><br></pre></td></tr></table></figure>
<p>效果：</p>
<div class="tabs" id="test1"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#test1-1">test1 1</button></li><li class="tab"><button type="button" data-href="#test1-2">test1 2</button></li><li class="tab"><button type="button" data-href="#test1-3">test1 3</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="test1-1"><p><strong>This is Tab 1.</strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-2"><p><strong>This is Tab 2.</strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-3"><p><strong>This is Tab 3.</strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div>
<div class="note info simple"><p>可以设置预设选中index，设为-1则为都不选中。</p>
<p>可以设置icon</p>
</div>
<h3 id="18-6-Button">18.6 Button</h3>
<p>使用方法：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">&#123;% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %&#125;</span><br><span class="line"></span><br><span class="line">[url]         : 链接</span><br><span class="line">[text]        : 按钮文字</span><br><span class="line">[icon]        : [可选] 图标</span><br><span class="line">[color]       : [可选] 按钮背景顔色(默认style时）</span><br><span class="line"><span class="code">                      按钮字体和边框顔色(outline时)</span></span><br><span class="line"><span class="code">                      default/blue/pink/red/purple/orange/green</span></span><br><span class="line"><span class="code">[style]       : [可选] 按钮样式 默认实心</span></span><br><span class="line"><span class="code">                      outline/留空</span></span><br><span class="line"><span class="code">[layout]      : [可选] 按钮佈局 默认为line</span></span><br><span class="line"><span class="code">                      block/留空</span></span><br><span class="line"><span class="code">[position]    : [可选] 按钮位置 前提是设置了layout为block 默认为左边</span></span><br><span class="line"><span class="code">                      center/right/留空</span></span><br><span class="line"><span class="code">[size]        : [可选] 按钮大小</span></span><br><span class="line"><span class="code">                      larger/留空</span></span><br></pre></td></tr></table></figure>
<p>示例</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">This is theme-owner&#x27;s website, click the button &#123;% btn &#x27;https://butterfly.js.org/&#x27;,Butterfly %&#125;</span><br><span class="line">This is theme-owner&#x27;s website, click the button &#123;% btn &#x27;https://butterfly.js.org/&#x27;,Butterfly,far fa-hand-point-right %&#125;</span><br><span class="line">This is theme-owner&#x27;s website, click the button &#123;% btn &#x27;https://butterfly.js.org/&#x27;,Butterfly,,outline %&#125;</span><br><span class="line">This is theme-owner&#x27;s website, click the button &#123;% btn &#x27;https://butterfly.js.org/&#x27;,Butterfly,far fa-hand-point-right,outline %&#125;</span><br><span class="line">This is theme-owner&#x27;s website, click the button &#123;% btn &#x27;https://butterfly.js.org/&#x27;,Butterfly,far fa-hand-point-right,larger %&#125;</span><br></pre></td></tr></table></figure>
<p>This is theme-owner’s website, click the button <a class="btn-beautify " target="_blank" rel="noopener" href="https://butterfly.js.org/" 
  title="Butterfly"><span>Butterfly</span></a><br>
This is theme-owner’s website, click the button <a class="btn-beautify " target="_blank" rel="noopener" href="https://butterfly.js.org/" 
  title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a><br>
This is theme-owner’s website, click the button <a class="btn-beautify outline" target="_blank" rel="noopener" href="https://butterfly.js.org/" 
  title="Butterfly"><span>Butterfly</span></a><br>
This is theme-owner’s website, click the button <a class="btn-beautify outline" target="_blank" rel="noopener" href="https://butterfly.js.org/" 
  title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a><br>
This is theme-owner’s website, click the button <a class="btn-beautify larger" target="_blank" rel="noopener" href="https://butterfly.js.org/" 
  title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a></p>
<a class="btn-beautify outline blue larger" target="_blank" rel="noopener" href="http://www.baidu.com" 
  title="去百度一下"><i class="far fa-hand-point-right"></i><span>去百度一下</span></a>
<h3 id="18-8-inlineImg">18.8 inlineImg</h3>
<p>主题中的图片都是默认以<code>块级元素</code>显示，如果你想以<code>内联元素</code>显示，可以使用这个标签外挂。</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">&#123;% inlineImg [src] [height] %&#125;</span><br><span class="line"></span><br><span class="line">[src]      :    图片链接</span><br><span class="line">[height]   ：   图片高度限制【可选】</span><br></pre></td></tr></table></figure>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">内联图片： &#123;% inlineImg https://i.loli.net/2021/03/19/5M4jUB3ynq7ePgw.png 150px %&#125;</span><br></pre></td></tr></table></figure>
<h3 id="18-9-label">18.9 label</h3>
<p>高亮需要的文字</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">&#123;% label text color %&#125;</span><br><span class="line"></span><br><span class="line">[label] : 文字</span><br><span class="line">[color] ： 【可选】背景颜色，默认为 default ，default/blue/pink/red/purple/orange/green</span><br></pre></td></tr></table></figure>
<p>这是一段<mark class="hl-label default">测试</mark>  文字，<mark class="hl-label blue">我是蓝色</mark> ,而<mark class="hl-label pink">我是粉色</mark> 。</p>
<h3 id="18-10-timeline">18.10 timeline</h3>
<div class="note info simple"><p>4.0.0以上支持。</p>
</div>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">&#123;% timeline title,color %&#125;</span><br><span class="line">&lt;!-- timeline title --&gt;</span><br><span class="line">xxxxx</span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line">&lt;!-- timeline title --&gt;</span><br><span class="line">xxxxx</span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line">&#123;% endtimeline %&#125;</span><br><span class="line"></span><br><span class="line">[title] : 标题/时间线</span><br><span class="line">[color] : timeline 颜色 default(留空) / blue / pink / red / purple / orange / green</span><br></pre></td></tr></table></figure>
<p>示例：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">&#123;% timeline 2022 %&#125;</span><br><span class="line">&lt;!-- timeline 01-02 --&gt;</span><br><span class="line">这是测试页面</span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line">&#123;% endtimeline %&#125;</span><br></pre></td></tr></table></figure>
<div class="timeline undefined"><div class='timeline-item headline'><div class='timeline-item-title'><div class='item-circle'><p>2022</p>
</div></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>01-02</p>
</div></div><div class='timeline-item-content'><p>这是测试页面</p>
</div></div></div>
<h3 id="18-11-flink">18.11 flink</h3>
<div class="note info simple"><p>4.1.0以上支持。</p>
</div>
<p>可在任何界面插入类似友情链接列表效果</p>
<p>内容格式与友情链接界面一样，支持 yml 格式</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&#123;% flink %&#125;</span><br><span class="line">xxxxxx</span><br><span class="line">&#123;% endflink %&#125;</span><br></pre></td></tr></table></figure>
<p>示例：</p>
<figure class="highlight markdown"><table><tr><td class="code"><pre><span class="line">&#123;% flink %&#125;</span><br><span class="line"><span class="bullet">-</span> class<span class="emphasis">_name: 友情链接</span></span><br><span class="line"><span class="emphasis">  class_</span>desc: 那些人，那些事</span><br><span class="line">  link<span class="emphasis">_list:</span></span><br><span class="line"><span class="emphasis">    - name: JerryC</span></span><br><span class="line"><span class="emphasis">      link: https://jerryc.me/</span></span><br><span class="line"><span class="emphasis">      avatar: https://jerryc.me/img/avatar.png</span></span><br><span class="line"><span class="emphasis">      descr: 今日事,今日毕</span></span><br><span class="line"><span class="emphasis">    - name: Hexo</span></span><br><span class="line"><span class="emphasis">      link: https://hexo.io/zh-tw/</span></span><br><span class="line"><span class="emphasis">      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg</span></span><br><span class="line"><span class="emphasis">      descr: 快速、简单且强大的网志框架</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">- class_</span>name: 网站</span><br><span class="line">  class<span class="emphasis">_desc: 值得推荐的网站</span></span><br><span class="line"><span class="emphasis">  link_</span>list:</span><br><span class="line"><span class="bullet">    -</span> name: Youtube</span><br><span class="line"><span class="code">      link: https://www.youtube.com/</span></span><br><span class="line"><span class="code">      avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png</span></span><br><span class="line"><span class="code">      descr: 视频网站</span></span><br><span class="line"><span class="code">    - name: Weibo</span></span><br><span class="line"><span class="code">      link: https://www.weibo.com/</span></span><br><span class="line"><span class="code">      avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png</span></span><br><span class="line"><span class="code">      descr: 中国最大社交分享平台</span></span><br><span class="line"><span class="code">    - name: Twitter</span></span><br><span class="line"><span class="code">      link: https://twitter.com/</span></span><br><span class="line"><span class="code">      avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png</span></span><br><span class="line"><span class="code">      descr: 社交分享平台</span></span><br><span class="line"><span class="code">&#123;% endflink %&#125;</span></span><br></pre></td></tr></table></figure>
<div class="flink"><div class="flink-name">友情链接</div><div class="flink-desc">那些人，那些事</div> <div class="flink-list">
          <div class="flink-list-item">
            <a href="https://jerryc.me/" title="JerryC" target="_blank">
              <div class="flink-item-icon">
                <img class="no-lightbox" src= "/img/hexo_loading.gif" data-lazy-src="https://jerryc.me/img/avatar.png" onerror='this.onerror=null;this.src="/img/friend_404.gif"' alt="JerryC" />
              </div>
              <div class="flink-item-name">JerryC</div> 
              <div class="flink-item-desc" title="今日事,今日毕">今日事,今日毕</div>
            </a>
          </div>
          <div class="flink-list-item">
            <a href="https://hexo.io/zh-tw/" title="Hexo" target="_blank">
              <div class="flink-item-icon">
                <img class="no-lightbox" src= "/img/hexo_loading.gif" data-lazy-src="https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg" onerror='this.onerror=null;this.src="/img/friend_404.gif"' alt="Hexo" />
              </div>
              <div class="flink-item-name">Hexo</div> 
              <div class="flink-item-desc" title="快速、简单且强大的网志框架">快速、简单且强大的网志框架</div>
            </a>
          </div></div><div class="flink-name">网站</div><div class="flink-desc">值得推荐的网站</div> <div class="flink-list">
          <div class="flink-list-item">
            <a href="https://www.youtube.com/" title="Youtube" target="_blank">
              <div class="flink-item-icon">
                <img class="no-lightbox" src= "/img/hexo_loading.gif" data-lazy-src="https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png" onerror='this.onerror=null;this.src="/img/friend_404.gif"' alt="Youtube" />
              </div>
              <div class="flink-item-name">Youtube</div> 
              <div class="flink-item-desc" title="视频网站">视频网站</div>
            </a>
          </div>
          <div class="flink-list-item">
            <a href="https://www.weibo.com/" title="Weibo" target="_blank">
              <div class="flink-item-icon">
                <img class="no-lightbox" src= "/img/hexo_loading.gif" data-lazy-src="https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png" onerror='this.onerror=null;this.src="/img/friend_404.gif"' alt="Weibo" />
              </div>
              <div class="flink-item-name">Weibo</div> 
              <div class="flink-item-desc" title="中国最大社交分享平台">中国最大社交分享平台</div>
            </a>
          </div>
          <div class="flink-list-item">
            <a href="https://twitter.com/" title="Twitter" target="_blank">
              <div class="flink-item-icon">
                <img class="no-lightbox" src= "/img/hexo_loading.gif" data-lazy-src="https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png" onerror='this.onerror=null;this.src="/img/friend_404.gif"' alt="Twitter" />
              </div>
              <div class="flink-item-name">Twitter</div> 
              <div class="flink-item-desc" title="社交分享平台">社交分享平台</div>
            </a>
          </div></div></div>
<div class="note warning simple"><p>本文为测试博客而摘录的教程。更多深入请访问<a target="_blank" rel="noopener" href="https://butterfly.js.org/posts/dc584b87/">butterfly主题官网文档</a>。</p>
</div></article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://lienle.gitee.io">Lenl</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://lienle.gitee.io/%E4%B8%BB%E9%A2%98%E5%8F%8A%E5%8D%9A%E6%96%87%E7%9B%B8%E5%85%B3-2/">https://lienle.gitee.io/%E4%B8%BB%E9%A2%98%E5%8F%8A%E5%8D%9A%E6%96%87%E7%9B%B8%E5%85%B3-2/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://lienle.gitee.io" target="_blank">LenlBlog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/butterfly%E4%B8%BB%E9%A2%98/">butterfly主题</a><a class="post-meta__tags" href="/tags/Hexo/">Hexo</a></div><div class="post_share"><div class="social-share" data-image="https://z4a.net/images/2023/04/22/ce1b96feb4e86b8071ed46f0b017a0af.md.jpg" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><div class="post-reward"><div class="reward-button"><i class="fas fa-qrcode"></i> 打赏</div><div class="reward-main"><ul class="reward-all"><li class="reward-item"><a href="/img/wechat.png" target="_blank"><img class="post-qr-code-img" src= "/img/hexo_loading.gif" data-lazy-src="/img/wechat.png" alt="微信"/></a><div class="post-qr-code-desc">微信</div></li><li class="reward-item"><a href="/img/alipay.png" target="_blank"><img class="post-qr-code-img" src= "/img/hexo_loading.gif" data-lazy-src="/img/alipay.png" alt="支付宝"/></a><div class="post-qr-code-desc">支付宝</div></li></ul></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/%E4%B8%BB%E9%A2%98%E5%8F%8A%E5%8D%9A%E6%96%87%E7%9B%B8%E5%85%B3_1/" title="hexo-butterfly主题配置摘录_1"><img class="cover" src= "/img/hexo_loading.gif" data-lazy-src="https://z4a.net/images/2023/04/22/ce1b96feb4e86b8071ed46f0b017a0af.md.jpg" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">hexo-butterfly主题配置摘录_1</div></div></a></div><div class="next-post pull-right"><a href="/copy/wzz/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F%E7%B3%BB%E7%BB%9F%E5%AE%89%E8%A3%85%E5%8F%82%E8%80%83/" title="操作系统安装参考-Windows"><img class="cover" src= "/img/hexo_loading.gif" data-lazy-src="https://z4a.net/images/2023/04/23/computerSystemRestore.md.jpg" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">操作系统安装参考-Windows</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/%E4%B8%BB%E9%A2%98%E5%8F%8A%E5%8D%9A%E6%96%87%E7%9B%B8%E5%85%B3_1/" title="hexo-butterfly主题配置摘录_1"><img class="cover" src= "/img/hexo_loading.gif" data-lazy-src="https://z4a.net/images/2023/04/22/ce1b96feb4e86b8071ed46f0b017a0af.md.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2023-04-22</div><div class="title">hexo-butterfly主题配置摘录_1</div></div></a></div></div></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div class="vcomment" id="vcomment"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src= "/img/hexo_loading.gif" data-lazy-src="/img/lenl.png" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Lenl</div><div class="author-info__description">心有所向，日复一日，必有精进~</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">17</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">25</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">8</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/vimianma"><i class="fab fa-github"></i><span>View me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://gitee.com/lienle" target="_blank" title="Gitee"><i class="fa-brands fa-git" style="color: #c71d23;"></i></a><a class="social-icon" href="https://github.com/vimianma" target="_blank" title="Github"><i class="fab fa-github" style="color: #24292e;"></i></a><a class="social-icon" href="mailto:lenl412@163.com" target="_blank" title="Email"><i class="fas fa-envelope" style="color: #4a7dbe;"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">本站意在记录个人生活中的所学所感所想所获；<br/>心有所向，日复一日，必有精进~~~<br>请多多指教~</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E8%AF%AD%E8%A8%80"><span class="toc-number">1.</span> <span class="toc-text">1 语言</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E7%BD%91%E7%AB%99%E8%B5%84%E6%96%99"><span class="toc-number">2.</span> <span class="toc-text">2 网站资料</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-%E5%AF%BC%E8%88%AA%E6%A0%8F%E8%AE%BE%E7%BD%AE"><span class="toc-number">3.</span> <span class="toc-text">3 导航栏设置</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#3-1-%E5%8F%82%E6%95%B0%E8%AE%BE%E7%BD%AE"><span class="toc-number">3.1.</span> <span class="toc-text">3.1 参数设置</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-2-%E8%8F%9C%E5%8D%95-%E7%9B%AE%E5%BD%95"><span class="toc-number">3.2.</span> <span class="toc-text">3.2 菜单&#x2F;目录</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-%E4%BB%A3%E7%A0%81%E5%9D%97"><span class="toc-number">4.</span> <span class="toc-text">4 代码块</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#4-1-%E4%BB%A3%E7%A0%81%E9%AB%98%E4%BA%AE%E4%B8%BB%E9%A2%98"><span class="toc-number">4.1.</span> <span class="toc-text">4.1 代码高亮主题</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-2-%E4%BB%A3%E7%A0%81%E5%A4%8D%E5%88%B6"><span class="toc-number">4.2.</span> <span class="toc-text">4.2 代码复制</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-3-%E4%BB%A3%E7%A0%81%E7%8B%82%E5%B1%95%E5%BC%80-%E5%85%B3%E9%97%AD"><span class="toc-number">4.3.</span> <span class="toc-text">4.3 代码狂展开&#x2F;关闭</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-4-%E4%BB%A3%E7%A0%81%E6%8D%A2%E8%A1%8C"><span class="toc-number">4.4.</span> <span class="toc-text">4.4 代码换行</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-5-%E4%BB%A3%E7%A0%81%E9%AB%98%E5%BA%A6%E9%99%90%E5%88%B6"><span class="toc-number">4.5.</span> <span class="toc-text">4.5 代码高度限制</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-%E7%A4%BE%E4%BA%A4%E5%9B%BE%E6%A0%87"><span class="toc-number">5.</span> <span class="toc-text">5 社交图标</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-%E5%A4%B4%E5%83%8F"><span class="toc-number">6.</span> <span class="toc-text">6 头像</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7-%E9%A1%B6%E9%83%A8%E5%9B%BE"><span class="toc-number">7.</span> <span class="toc-text">7 顶部图</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8-%E6%96%87%E7%AB%A0%E5%B0%81%E9%9D%A2"><span class="toc-number">8.</span> <span class="toc-text">8 文章封面</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#9-%E9%A1%B5%E9%9D%A2meta%E6%98%BE%E7%A4%BA"><span class="toc-number">9.</span> <span class="toc-text">9 页面meta显示</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#10-%E6%96%87%E7%AB%A0%E8%8A%82%E9%80%89%E6%91%98%E8%A6%81%E5%92%8C%E6%8F%8F%E8%BF%B0"><span class="toc-number">10.</span> <span class="toc-text">10 文章节选摘要和描述</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#11-%E9%A1%B5%E9%9D%A2%E9%94%9A%E7%82%B9"><span class="toc-number">11.</span> <span class="toc-text">11 页面锚点</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#12-%E5%9B%BE%E7%89%87%E6%8F%8F%E8%BF%B0"><span class="toc-number">12.</span> <span class="toc-text">12 图片描述</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#13-%E7%BD%91%E9%A1%B5%E6%96%87%E5%AD%97%E5%A4%8D%E5%88%B6"><span class="toc-number">13.</span> <span class="toc-text">13 网页文字复制</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#14-%E6%96%87%E7%AB%A0%E9%A1%B5%E7%9B%B8%E5%85%B3%E9%85%8D%E7%BD%AE"><span class="toc-number">14.</span> <span class="toc-text">14 文章页相关配置</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#14-1-%E6%96%87%E7%AB%A0%E7%89%88%E6%9D%83"><span class="toc-number">14.1.</span> <span class="toc-text">14.1 文章版权</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#14-2-%E6%96%87%E7%AB%A0%E6%89%93%E8%B5%8F"><span class="toc-number">14.2.</span> <span class="toc-text">14.2 文章打赏</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#14-3-TOC"><span class="toc-number">14.3.</span> <span class="toc-text">14.3 TOC</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#14-4-%E7%9B%B8%E5%85%B3%E6%96%87%E7%AB%A0"><span class="toc-number">14.4.</span> <span class="toc-text">14.4 相关文章</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#14-5-%E6%96%87%E7%AB%A0%E8%BF%87%E6%9C%9F%E6%8F%90%E9%86%92"><span class="toc-number">14.5.</span> <span class="toc-text">14.5 文章过期提醒</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#14-6-%E6%96%87%E7%AB%A0%E7%BC%96%E8%BE%91%E6%8C%89%E9%92%AE"><span class="toc-number">14.6.</span> <span class="toc-text">14.6 文章编辑按钮</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#14-7-%E6%96%87%E7%AB%A0%E5%88%86%E9%A1%B5%E6%8C%89%E9%92%AE"><span class="toc-number">14.7.</span> <span class="toc-text">14.7 文章分页按钮</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#15-Footer"><span class="toc-number">15.</span> <span class="toc-text">15 Footer</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#15-1-%E5%8D%9A%E5%AE%A2%E5%B9%B4%E4%BB%BD"><span class="toc-number">15.1.</span> <span class="toc-text">15.1 博客年份</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#15-2-%E9%A1%B5%E8%84%9A%E8%87%AA%E5%AE%9A%E4%B9%89%E8%84%9A%E6%9C%AC"><span class="toc-number">15.2.</span> <span class="toc-text">15.2 页脚自定义脚本</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#16-%E4%BE%A7%E8%BE%B9%E6%A0%8F%E8%AE%BE%E7%BD%AE"><span class="toc-number">16.</span> <span class="toc-text">16 侧边栏设置</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#16-1-%E4%BE%A7%E8%BE%B9%E6%8E%92%E7%89%88"><span class="toc-number">16.1.</span> <span class="toc-text">16.1 侧边排版</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#16-2-%E8%AE%BF%E9%97%AE%E4%BA%BA%E6%95%B0"><span class="toc-number">16.2.</span> <span class="toc-text">16.2 访问人数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#16-3-%E8%BF%90%E8%A1%8C%E6%97%B6%E9%97%B4"><span class="toc-number">16.3.</span> <span class="toc-text">16.3 运行时间</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#16-4-%E6%9C%80%E6%96%B0%E8%AF%84%E8%AE%BA"><span class="toc-number">16.4.</span> <span class="toc-text">16.4 最新评论</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#16-5-%E8%87%AA%E5%AE%9A%E4%B9%89%E6%B7%BB%E5%8A%A0%E6%A0%8F%E7%9B%AE"><span class="toc-number">16.5.</span> <span class="toc-text">16.5 自定义添加栏目</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#16-5-1-widget%E6%8E%92%E5%BA%8F"><span class="toc-number">16.5.1.</span> <span class="toc-text">16.5.1 widget排序</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#16-5-2-%E8%87%AA%E5%AE%9A%E4%B9%89widget"><span class="toc-number">16.5.2.</span> <span class="toc-text">16.5.2 自定义widget</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#16-5-3-%E7%A4%BA%E4%BE%8B"><span class="toc-number">16.5.3.</span> <span class="toc-text">16.5.3 示例</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#17-%E5%8F%B3%E4%B8%8B%E8%A7%92%E6%8C%89%E9%92%AE"><span class="toc-number">17.</span> <span class="toc-text">17 右下角按钮</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#17-1-%E7%AE%80%E7%B9%81%E8%BD%AC%E6%8D%A2"><span class="toc-number">17.1.</span> <span class="toc-text">17.1 简繁转换</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#17-2-%E9%98%85%E8%AF%BB%E6%A8%A1%E5%BC%8F"><span class="toc-number">17.2.</span> <span class="toc-text">17.2 阅读模式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#17-3-%E5%A4%9C%E9%97%B4%E6%A8%A1%E5%BC%8F"><span class="toc-number">17.3.</span> <span class="toc-text">17.3 夜间模式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#17-4-%E6%BB%9A%E5%8A%A8%E7%8A%B6%E6%80%81%E7%99%BE%E5%88%86%E6%AF%94"><span class="toc-number">17.4.</span> <span class="toc-text">17.4 滚动状态百分比</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#17-5-%E6%8C%89%E9%92%AE%E6%8E%92%E5%BA%8F"><span class="toc-number">17.5.</span> <span class="toc-text">17.5 按钮排序</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#18-%E6%A0%87%E7%AD%BE%E5%A4%96%E6%8C%82"><span class="toc-number">18.</span> <span class="toc-text">18 标签外挂</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#18-1-Note"><span class="toc-number">18.1.</span> <span class="toc-text">18.1 Note</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#18-2-Gallery%E7%9B%B8%E5%86%8C%E5%9B%BE%E5%BA%93"><span class="toc-number">18.2.</span> <span class="toc-text">18.2 Gallery相册图库</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#18-3-Gallery%E7%9B%B8%E5%86%8C"><span class="toc-number">18.3.</span> <span class="toc-text">18.3 Gallery相册</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#18-4-tag-hide"><span class="toc-number">18.4.</span> <span class="toc-text">18.4 tag-hide</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#18-5-mermaid"><span class="toc-number">18.5.</span> <span class="toc-text">18.5 mermaid</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#18-5-Tabs"><span class="toc-number">18.6.</span> <span class="toc-text">18.5 Tabs</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#18-6-Button"><span class="toc-number">18.7.</span> <span class="toc-text">18.6 Button</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#18-8-inlineImg"><span class="toc-number">18.8.</span> <span class="toc-text">18.8 inlineImg</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#18-9-label"><span class="toc-number">18.9.</span> <span class="toc-text">18.9 label</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#18-10-timeline"><span class="toc-number">18.10.</span> <span class="toc-text">18.10 timeline</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#18-11-flink"><span class="toc-number">18.11.</span> <span class="toc-text">18.11 flink</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/notes/dockerNotes/" title="Docker备忘笔记"><img src= "/img/hexo_loading.gif" data-lazy-src="https://z4a.net/images/2023/04/22/fcc1d07f3136fe8e818242a6534391c8.md.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Docker备忘笔记"/></a><div class="content"><a class="title" href="/notes/dockerNotes/" title="Docker备忘笔记">Docker备忘笔记</a><time datetime="2024-04-06T13:17:09.000Z" title="发表于 2024-04-06 21:17:09">2024-04-06</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/notes/mysqlInstall/" title="mysql压缩包方式本地安装"><img src= "/img/hexo_loading.gif" data-lazy-src="https://z4a.net/images/2023/04/22/fcc1d07f3136fe8e818242a6534391c8.md.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="mysql压缩包方式本地安装"/></a><div class="content"><a class="title" href="/notes/mysqlInstall/" title="mysql压缩包方式本地安装">mysql压缩包方式本地安装</a><time datetime="2024-01-03T05:33:33.000Z" title="发表于 2024-01-03 13:33:33">2024-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/notes/PdfView/" title="基于pdf.js的前后端分离式PDF文件预览实现"><img src= "/img/hexo_loading.gif" data-lazy-src="https://z4a.net/images/2023/04/22/fcc1d07f3136fe8e818242a6534391c8.md.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="基于pdf.js的前后端分离式PDF文件预览实现"/></a><div class="content"><a class="title" href="/notes/PdfView/" title="基于pdf.js的前后端分离式PDF文件预览实现">基于pdf.js的前后端分离式PDF文件预览实现</a><time datetime="2023-08-06T02:18:26.000Z" title="发表于 2023-08-06 10:18:26">2023-08-06</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/notes/electronVue/" title="Electron+Vue项目搭建"><img src= "/img/hexo_loading.gif" data-lazy-src="https://z4a.net/images/2023/04/22/fcc1d07f3136fe8e818242a6534391c8.md.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Electron+Vue项目搭建"/></a><div class="content"><a class="title" href="/notes/electronVue/" title="Electron+Vue项目搭建">Electron+Vue项目搭建</a><time datetime="2023-05-14T02:36:59.000Z" title="发表于 2023-05-14 10:36:59">2023-05-14</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/notes/chunkFile/" title="基于SpringBoot与Vue的大文件分片上传与流式下载"><img src= "/img/hexo_loading.gif" data-lazy-src="https://z4a.net/images/2023/04/22/fcc1d07f3136fe8e818242a6534391c8.md.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="基于SpringBoot与Vue的大文件分片上传与流式下载"/></a><div class="content"><a class="title" href="/notes/chunkFile/" title="基于SpringBoot与Vue的大文件分片上传与流式下载">基于SpringBoot与Vue的大文件分片上传与流式下载</a><time datetime="2023-05-13T13:57:28.000Z" title="发表于 2023-05-13 21:57:28">2023-05-13</time></div></div></div></div></div></div></main><footer id="footer" style="background: -#484847"><div id="footer-wrap"><div class="copyright">&copy;2023 - 2024 By Lenl</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div><div class="footer_custom_text">Hi, welcome to my blog !</div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.umd.min.js"></script><script src="https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js" type="module"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><div class="js-pjax"><script>function loadValine () {
  function initValine () {
    const valine = new Valine(Object.assign({
      el: '#vcomment',
      appId: 'dBlOeCLNhBxbSdZO44fRKdBa-gzGzoHsz',
      appKey: 'DCSQoDhPl0UOF7Ix9Imdfd9X',
      avatar: 'monsterid',
      serverURLs: '',
      emojiMaps: "",
      path: window.location.pathname,
      visitor: false
    }, null))
  }

  if (typeof Valine === 'function') initValine() 
  else getScript('https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js').then(initValine)
}

if ('Valine' === 'Valine' || !false) {
  if (false) btf.loadComment(document.getElementById('vcomment'),loadValine)
  else setTimeout(loadValine, 0)
} else {
  function loadOtherComment () {
    loadValine()
  }
}</script></div><script defer="defer" id="ribbon" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/canvas-ribbon.min.js" size="150" alpha="0.6" zIndex="-1" mobile="false" data-click="true"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div class="no-result" id="local-search-results"></div><div id="local-search-stats-wrap"></div></div></div><div id="search-mask"></div><script src="/js/search/local-search.js"></script></div></div></body></html>